<%--
  Created by IntelliJ IDEA.
  User: User
  Date: 2024/3/23
  Time: 16:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>关键字搜索</title>
    <style>
        li {
            list-style: none;
            font-size: 14px;
        }

        #d {
            border: 1px solid #dddddd;
            border-top: 0px;
            width: 260px;
            padding: 3px 5px;
            max-height: 100px;
            overflow: auto;
            display: none;
        }
    </style>
    <script>
        function query() {
            let spell = document.getElementById("spell").value;
            let d = document.getElementById("d");

            // 当进入该方法时,将原有的数据清除
            d.innerHTML = "";

            // 如果用户没有输入任何内容,则不做任何操作
            if (spell == "") {
                d.style.display = "none";
                return;
            }

            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    let result = xhr.responseText;
                    console.log(result);
                    let datas = eval("(" + result + ")");

                    // 如果没有查询到数据,则隐藏对应区域
                    if (datas.length == 0) {
                        d.style.display = "none";
                        return;
                    }

                    // 在遍历数据之前,将隐藏的区域展现出来
                    d.style.display = "block";
                    for (let i = 0; i < datas.length; i++) {
                        d.innerHTML = d.innerHTML + "<li>" + datas[i].message + "</li>";
                    }
                }

            };

            xhr.open("get", "${pageContext.request.contextPath}/query?spell=" + spell, true);
            xhr.send(null);
        }
    </script>
</head>
<body>
<!--
    当用户在输入框中每输入一个字符的时候,去数据库查询一次
    根据用户已经输入的字符去数据库中通过关键字或者消息进行模糊查询
    将查询出来的所有数据的message属性值显示到li列表中
-->
<input type="text" id="spell" style="width: 272px;" onkeyup="query()">
<div id="d">
</div>
</body>
</html>
